<template>
  <div>
    <!-- 汉堡菜单 -->
    <div>
      <button
        :class="{ 'hamburger-active': isOpen }"
        class="hamburger"
        @click="toggleMenu"
      >
        <div class="hamburger__line"></div>
        <div class="hamburger__line"></div>
        <div class="hamburger__line"></div>
      </button>
    </div>
    <!-- 弹窗容器 -->
    <div :class="{ 'Rootcontainer-open': isOpen }" class="Rootcontainer">
      <!-- 弹窗内容 -->
      <Dome
        ref="NavcomponentRef"
        :level="0"
        :nav-data="navData"
        title="主菜单"
      />
    </div>
  </div>
</template>
menuPopupWindow
<script setup lang="ts">
import { ref } from 'vue';

import Dome from './dome.vue';
/** 是否打开 */
const isOpen = ref(false);
/** 导航数据 */
const navData = [
  {
    name: '首页',
    children: [],
  },
  {
    name: '产品中心',
    children: [
      {
        name: '手机',
        children: [
          {
            name: '旗舰系列',
            children: [
              { name: '旗舰系列1', children: [] },
              { name: '旗舰系列2', children: [] },
              { name: '旗舰系列3', children: [] },
              { name: '旗舰系列4', children: [] },
              { name: '旗舰系列5', children: [] },
              { name: '旗舰系列6', children: [] },
              { name: '旗舰系列7', children: [] },
            ],
          },
          { name: '青春版', children: [] },
        ],
      },
      {
        name: '电脑',
        children: [
          { name: '笔记本', children: [] },
          { name: '台式机', children: [] },
        ],
      },
    ],
  },
  {
    name: '服务支持',
    children: [
      { name: '售后服务', children: [] },
      { name: '在线客服', children: [] },
    ],
  },
];

/** 菜单引用 */
const NavcomponentRef = ref<any>(null);

/** 切换菜单 */
const toggleMenu = () => {
  isOpen.value = !isOpen.value;
  if (isOpen.value) {
    setTimeout(() => {
      NavcomponentRef.value?.Updateposition();
    }, 0);
  }
};
</script>
<style scoped lang="scss">
// 汉堡菜单
.hamburger {
  position: absolute;
  top: 1%;
  right: 1%;
  z-index: 100;
  padding: 0;
  cursor: pointer;
  background: transparent;
  border: transparent;
}

// 汉堡菜单隐藏
.hamburger.hidden {
  display: none;
}

// 汉堡菜单线
.hamburger__line {
  width: 2rem;
  height: 0.25rem;
  margin: 0.25rem 0;
  background: rgb(203 213 225);
  transition: all 0.3s ease-out;
}

// 汉堡菜单激活状态
.hamburger-active .hamburger__line:nth-child(1) {
  transform: translateY(9px) rotate(45deg);
}

.hamburger-active .hamburger__line:nth-child(2) {
  opacity: 0;
}

.hamburger-active .hamburger__line:nth-child(3) {
  transform: translateY(-9px) rotate(-45deg);
}

/** 弹窗容器样式 */
.Rootcontainer {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 19;
  width: 100%;
  height: 100%;
  min-height: 100vh;
  overflow: hidden;
  background-color: gray;
  box-shadow: 0 0 10px 0 rgb(0 0 0 / 10%);
  opacity: 0;
  transition: all 1s ease;
  transform: translateX(100%);
}

/** 弹窗容器打开样式 */
.Rootcontainer-open {
  opacity: 1;
  transform: translateX(0);
}
</style>
